<template>
  <div class="podium-area">
    <img class="podium-bg" src="/assets/imgs/podium.png" alt="" srcset="" />
    <div class="podium-content">
      <!-- <div class="podium-item">
        <img class="podium-base" src="/assets/imgs/base.png" alt="" srcset="" />
        <img class="podium-medal" src="/assets/imgs/medal_01.png" alt="" srcset="" />
      </div> -->
      <template v-for="(item, index) of medals">
        <div
          class="podium-item"
          :style="{ width: (isEnd ? 13 : 16) + 'vw ' }"
          :key="`meal-${index + 1}`"
          @click="handleSelectMedal(index, item)"
        >
          <img class="podium-base" src="/assets/imgs/base.png" alt="" srcset="" />
          <img class="podium-medal" :src="require(`../assets/medal_0${index + 1}_no.png`)" alt="" srcset="" />
          <img
            v-show="item"
            class="podium-medal podium-medal-active"
            :src="`/assets/imgs/medal_0${index + 1}.png`"
            alt=""
            srcset=""
          />
        </div>
      </template>

      <div
        v-show="isEnd"
        class="podium-item"
        :style="{ width: (isEnd ? 13 : 16) + 'vw ' }"
        @click="handleSelectMedal(4)"
      >
        <img class="podium-base" src="/assets/imgs/base.png" alt="" srcset="" />
        <!-- <img class="podium-medal" src="../assets/medal_05_no.png" alt="" srcset="" /> -->

        <img class="podium-medal podium-medal-active" :src="`/assets/imgs/medal_05.png`" alt="" srcset="" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "podium",
  props: {
    isEnd: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      medals: [false, false, false, false],
      label: "",
      progress: 0,
      queue: null,
    }
  },
  methods: {
    handleSelectMedal(index) {
      if (!this.isEnd) return
      if (index === 4) {
        this.$emit("select", {
          index,
          isRight: true,
        })
        return
      }
      this.$emit("select", {
        index,
        isRight: this.medals[index],
      })
    },
    setA(index, isRight) {
      // this.medals[index] = isRight

      this.medals.splice(index, 1, isRight)
    },
  },
}
</script>

<style lang="scss" scoped>
.podium-area {
  position: absolute;
  bottom: 0;
  left: 0;
  // height: 200px;
  width: 100%;
  img {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .podium-bg {
    width: 100vw;
    margin-bottom: -8px;
    img {
      height: 100%;
    }
  }

  .podium-content {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 5vw;
    justify-content: center;
    align-items: center;
    width: 90vw;
    margin: 0 auto;

    // .podium-item {
    //   background-image: url("/assets/imgs/base.png");
    // }
    .podium-item {
      position: relative;
      margin-bottom: 2vw;
      margin-right: 10px;
      .podium-base {
        width: 100%;
      }
      .podium-medal {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
      }

      .podium-medal-active {
        animation: medal-zoomIn-Down 0.8s 1;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  @keyframes medal-zoomIn-Down {
    from {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }
}
</style>
